<template>
	<view class="box">
		<uNavbar title="银行卡列表" bgColor="transparent"></uNavbar>
		<view class="banklist" v-for="item in banklists" :key="item.id">
			<view class="bankitem">
				<view class="bankname">
					{{item.account_bank}}
				</view>
				<view class="banknum">
					****{{item.short_card_no}}
				</view>
				<view class="banktype">
					{{item.card_type_desc}}
				</view>
				<uni-icons type="more-filled" color="#fff"  size="24" class="del"></uni-icons>
			</view>
		</view>
		<noDatas :xxxList="banklists" :status="status"  :showMore="false"></noDatas>
		<view class="btn" @click="gobindbankcard">
			添加银行卡
		</view>
	</view>

</template>

<script>
	import {banklist} from "../../api/wallet.js"
	export default {
		data() {
			return {
				type:'',
				toggleList: [{
						label: '提现卡',
						select: true
					},
					{
						label: '付款卡',
						select: false
					}
				],
				selval: "提现卡",
				banklists: [],
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onShow() {
			this.getbanklist()
		},
		methods: {
			getbanklist() {
				banklist({
					wallet_type:'1'
				}).then(res => {
					if (res.code == 1) {
						let list = res.data
						this.banklists = this.page == 1 ? list : this.banklists.concat(list);
						console.log(this.banklists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			clickToggleHandle(ele) {
				this.toggleList.forEach(item => item.select = false)
				this.currLabel = ele.label
				ele.select = true
				console.log(ele)
				this.selval = ele.label
			},
			gobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确定要移除吗',
					confirmText: "确定",
					confirmColor: "#FF2CDF",
					success: function(res) {
						if (res.confirm) {
							uni.$u.toast("删除成功");
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getbanklist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #211E38;
		position: relative;
	}

	.banklist {
		width: 750rpx;
		// height: 900rpx;
		overflow: auto;
		margin-top: 40rpx;

		.bankitem {
			margin: 0 auto;
			width: 690rpx;
			height: 284rpx;
			background: linear-gradient(274deg, #3040FC 1%, #FF2CDF 100%);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			position: relative;
			margin-bottom: 20rpx;

			.bankname {
				position: absolute;
				top: 32rpx;
				left: 32rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 32rpx;
			}

			.banknum {
				position: absolute;
				top: 116rpx;
				left: 32rpx;
				font-weight: 400;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.banktype {
				position: absolute;
				bottom: 32rpx;
				left: 32rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 32rpx;
			}

			.del {
				position: absolute;
				top: 32rpx;
				right: 32rpx;

			}
		}
	}

	.btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		bottom: 100rpx;
		width: 464rpx;
		height: 102rpx;
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		border: 2rpx solid #FF2CDF;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 102rpx;
		margin: 0 auto;
	}
</style>